
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableOpacity,
  Alert,
  Image
} from 'react-native';
import {
  SafeAreaView,
  StackNavigator
} from 'react-navigation';
const Dimensions = require('Dimensions')
const { width } = Dimensions.get('window');
import BottomMenu from '../components/home/bottomMenu';
import Login from './login';
let hr = (
  <View
    style={{
      borderBottomColor: 'black',
      borderBottomWidth: 1,
    }}>
  </View>
)
class NavigatorWrappingScreen extends React.Component {
  static navigationOptions = {
    header: {
      visible: false,
      headerMode: 'none',
    },
  };
  render() {
    return (
      <View>
        <SomeComponent />
        <MainScreenNavigator />
      </View>
    );
  }
}
export default class Me extends Component<{}> {
  constructor(props) {
    super(props);
  }
  static navigationOptions={
    tabBarLabel:'我',
    tabBarIcon:({tintColor})=>(
      <Image
        source={require('../../Assets/images/me.png')}
        style={[styles.icon,{tintColor:tintColor}]}
        />
    )
  }
  jump(tab) {
    const { navigate } = this.props.navigation;
    navigate(tab, {})
  }
  render() {
    let jumpMenu = [
      {
        icon: require('../../Assets/images/store.png'),
        title: '我的故事',
        tab: 'myStore'
      }, {
        icon: require('../../Assets/images/member.png'),
        title: '会员中心',
        tab: 'MemberCenter'
      }, {
        icon: require('../../Assets/images/setting.png'),
        title: '个人设置',
        tab: 'personalSetting'
      }, {
        icon: require('../../Assets/images/fk.png'),
        title: '体验反馈',
        tab: 'feedBack'
      }, {
        icon: require('../../Assets/images/about.png'),
        title: '关于软件',
        tab: 'aboutWe'
      }, {
        icon: require('../../Assets/images/contact.png'),
        title: '联系我们',
        tab: 'contactWe'
      }
    ]
    let arrowLeft = require('../../Assets/images/right.png');
    let menu = jumpMenu.map((itm, idx) => (
      <TouchableOpacity style={styles.menuStyle} key={idx} onPress={() => { this.jump(itm.tab) }}>
        <Image source={itm.icon} style={styles.menuIconStyle} />
        <Text style={styles.menuTitleStyle}>{itm.title}</Text>
        <Image style={styles.arrowLeftStyle} source={arrowLeft} />
        {/* <View style={{ borderWidth: 0.3, borderBottomColor: '#eee', width: '100%',  marginLeft: width * 0.05 ,marginBottom:2,}} /> */}
      </TouchableOpacity>
    ))
    return (
      <View style={styles.container}>
        <View style={styles.topStyle}>
          <Image source={require('../../Assets/images/m.jpg')} style={styles.iconStyle} />
          <Text>马云</Text>
          <View style={styles.relativesStyle}>
            <Text>亲友号：</Text>
            <Text>690808011</Text>
          </View>
        </View>
        <View style={styles.content}>
          {menu}
        </View>
        <TouchableOpacity>
        </TouchableOpacity>
      </View>
    )
  }
}
let styles = StyleSheet.create({
  iconStyle: {
    width: 100,
    height: 100,
  },
  menuStyle: {
    justifyContent: 'flex-start',
    width: width,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginBottom:10,
    borderBottomColor:'#444',
    borderBottomWidth:1,
  },
  menuIconStyle: {
    width: 32,
    height: 32,
    marginLeft:5,
  },
  menuTitleStyle: {
    marginLeft: 20,
    fontSize: 18,
  },
  container: {
    flex: 1,
    backgroundColor: '#E8E8E8',
    marginTop: 10,
    flexDirection: 'column',
    alignItems: 'center',
  },
  topStyle: {
    width: '100%',
    alignItems: 'center',
    backgroundColor: 'white',
    height: 170,
    justifyContent: 'center',
    marginBottom: 5,
  },
  content: {
    flex: 1,
    backgroundColor:'white',
  },
  relativesStyle: {
    marginTop: 10,
    alignItems: 'center',
    marginLeft: -50,
  },
  arrowLeftStyle: {
    width: 30,
    height: 30,
    right: 5,
    position: 'absolute'
  },
  icon: {
    width: 26,
    height: 26,
  }
})